<template>
  <div class="selector">
    <!--无视父路由，跳转到    :to="{path: '/home'}"-->
    <!--在父路由的前提下，跳转到  父路由/home  :to="{path: 'home'}"-->
    <router-link :to="{path: topath}">
      <div class="inner">
        <div class="img_wrap">
          <img class="img" :src="imgsrc">
        </div>
        <div class="text" :class="{img_choosed:this.$route.meta.footChoose === topath}">
          {{content}}
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'topbar_selector',
  props: ['topath', 'content', 'imgsrc']
}
</script>

<style lang="scss" scoped>
  .selector{
    width: 30%;
    height: px2rem(52);
    flex: 1;
    justify-content: space-around;
    .inner{
      width: px2rem(58);
      height: px2rem(52);
      margin: 0 auto;
      position: relative;
      .img_wrap{
        .img{
          width: px2rem(58);
          height: px2rem(52);
        }
      }
      .text{
        margin: 0 auto;
        width: px2rem(58);
        position: absolute;
        top: px2rem(35);
        font-size: px2rem(12);
        text-align: center;
        color: $unclick-color;
      }
      .img_choosed{
        color: #1270E3;
      }
    }
  }
</style>
